<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回收站</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
  <div class="dashboard-container" id="recycle-app">
    <div class="container">
      <div class="tableBar">
        <el-input
                placeholder="请输入菜品、套餐名称"
                prefix-icon="el-icon-search"
                style="width: 250px"
                v-model="param.name">
        </el-input>
        <el-date-picker
                v-model="param.dateRange"
                type="daterange"
                align="left"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
        </el-date-picker>
        <el-select v-model="param.categoryId" placeholder="请选择">
          <el-option
                  v-for="dishCategory in dishCategoryList"
                  :key="dishCategory.id"
                  :label="dishCategory.name"
                  :value="dishCategory.id">
          </el-option>
        </el-select>
        <el-button type="primary" @click="search()">搜索</el-button>
        <br/>
        <div class="tableLab">
          <span class="span-btn delBut non" @click="deleteHandle('批量', null)">批量删除</span>
          <span class="span-btn blueBug non" @click="recoveryHandle('1')">批量还原</span>
        </div>
    </div>
    <div>
      <el-table
              ref="multipleTable"
              :data="dishList"
              border
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="名称"
                width="120"
                prop="name">
        </el-table-column>
        <el-table-column
                label="价格"
                width="120">
          <template slot-scope="scope">{{scope.row.price/100}}</template>
        </el-table-column>
        <el-table-column
                prop="updateUser"
                label="操作人"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="更新时间"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                label="操作"
                show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="small"
                    class="blueBug"
                    @click="del()"
            >
              删除
            </el-button>
            <el-button
                    type="text"
                    size="small"
                    class="blueBug"
            >
              还原
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <!--引入回收站JS脚本-->
  <script src="../../api/recycle.js"></script>
    <script>
        new Vue({
          //声明VUE作用域
          el:"#recycle-app",
          //全局变量
          data:{
            param:{
              name:"",
              categoryId:"",
              dateRange:[],
              page:1,
              size:10
            },
            pickerOptions: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value: '',
            dishList: [],
            multipleSelection: [],
            currentPage:1,
            total:10,
            dishCategoryList:[] //菜品分类列表数据
          },
          //发方法区
          methods:{
            del(){
              alert("哈哈")
            },
            /*搜索菜品列表*/
            search(){
              getLogicDelDishList(this.param).then(res=>{
                  if(res.code == 200){
                      this.dishList = res.data;//把逻辑删除菜品列表数据，赋值给表单集合
                      this.total = res.total;
                  }else{
                    this.$message({
                      showClose: true,
                      message: res.msg,
                      type: 'error'
                    });
                  }
              }).catch(error=>{
                this.$message({
                  showClose: true,
                  message: error,
                  type: 'error'
                });
              })
            },
            handleSelectionChange(val) {
              this.multipleSelection = val;
            },
            handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
            },
            /*加载菜品分类列表数据*/
            getDishCategoryList () {
              //axios.get("/category/list",{}).then().catch();
              getCategoryList({ 'type': 1 }).then(res => {
                if (res.code === 200) {
                  this.dishCategoryList = res.data
                } else {
                  this.$message.error(res.msg || '操作失败')
                }
              })
            }
          },
          //生命周期方法-页面加载时就会执行该方法
          created:function(){
            //1.页面初始化-加载菜品分类列表数据
            this.getDishCategoryList();
            //2.页面初始化-加载逻辑删除的菜品列表数据
            this.search();
          }
        })
    </script>
</body>
</html>